<template>
  <div>
    <el-upload class="upload-demo" ref="upload" action='http://localhost:3000/upload'
      :headers="{ 'Authorization': 'Bearer ' + token }" :file-list="fileList" list-type="picture"
      :on-change='handleChange' :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove">
      <div class="placeholder">
        <!-- <div class="filename"></div> -->
        <el-button slot="trigger" size="small" type="primary" class="webuploader-pick" id="file1">选取图片</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" class="webuploader-pick"
          @click.stop.prevent="submitUpload()">提交</el-button>
      </div>
      <template>

        <ul class="el-upload-list el-upload-list--picture show">
          <li v-for="(item, index) in filePagination" class="el-upload-list__item is-success" tabindex="0" :key=index>
            <div style="width:100%;display: flex;justify-content: space-between;" @click.stop.prevent>

              <div>
                <img style="cursor: pointer;" @click.stop.prevent="scanBigImg(item)"
                  class="el-upload-list__item-thumbnail" :src="item.path">
              </div>

              <div style="margin-right:30px;margin-top:20px;">
                <span class='later'>{{ item.name }}</span>
                <span class='later'>{{ (item.size / 1024).toFixed(2) }} KB</span>
                <span class='later'>{{ item.type }}</span>
                <i style="font-size: 18px;margin-left:20px;padding-top:10px" class="el-icon-delete"
                  @click.stop.prevent="imgDelete(index)">
                </i>
              </div>
            </div>
          </li>
        </ul>
      </template>
    </el-upload>
    <div class="block" v-show='show'>
      <el-pagination layout="prev, pager, next" :total="length" @current-change="changePage"
        :current-page.sync="currentPage" :page-size='5'>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials = true;
export default {
  name: "ImgManager",
  data() {
    return {
      show: false,
      length: 0,
      captcha: "",
      fileList: [],
      filePagination: [],
      fileShow: [],
      currentPage: 1,
      token: localStorage.getItem('token'),
    }
  },
  methods: {
    async submitUpload() {
      let fd = new FormData();
      fd.append("name", this.name);
      this.fileList.forEach(item => {
        fd.append("files", item.raw);
      })
      await this.$axios.post('/upload', fd).then(res => {
        if (res.code === 200) {
          this.getImg()
          this.$message.success('上传成功')
        } else {
          this.$message.error('上传失败')
        }
      })
    },
    pagnation(e) {
      this.filePagination = []
      if (this.fileShow.length >= 5 * e) {
        for (let i = (e - 1) * 5; i < e * 5; i++) {
          this.filePagination.push(this.fileShow[i])
        }
      } else {
        for (let i = (e - 1) * 5; i < this.fileShow.length; i++) {
          this.filePagination.push(this.fileShow[i])
        }
      }
    },
    async getImg() {
      let res = await this.$axios.get('/files');
      this.fileShow = res
      this.pagnation(1)
      if (this.fileShow.length != 0) {
        this.show = true
      } else {
        this.show = false
      }
      this.length = this.fileShow.length
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    changePage(e) {
      this.pagnation(e)
    },
    scanBigImg(e) {
      console.log(e)
    },
    async imgDelete(index) {
      await this.$axios.delete('/del', { params: { id: this.filePagination[index].id, name: this.filePagination[index].name } })
      this.$message.success('删除成功')
      if (this.filePagination.length == 1 && this.fileShow != []) {
        this.getImg()
      } else {
        this.fileShow = await this.$axios.get('/files');
        this.pagnation(this.currentPage)
      }
    },
  },
  mounted() {
    this.getImg()
  }
}
</script>

<style scoped>
.later {
  margin-right: 30px;
}

.placeholder {
  width: 600px;
  border: 3px dashed #e6e6e6;
  min-height: 238px;
  padding-top: 80px;
  text-align: center;
  color: #cccccc;
  font-size: 18px;
  position: relative;
}

.webuploader-pick {
  font-size: 18px;
  background: #00b7ee;
  border-radius: 3px;
  line-height: 44px;
  padding: 0 30px;
  color: #fff;
  display: inline-block;
  margin: 20px auto;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.webuploader-pick {
  position: relative;
  display: inline-block;
  background: #00b7ee;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 10px 18px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  font-size: 12px;
  cursor: pointer;
}

.webuploader-pick input {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  padding: 10px 18px;
  cursor: pointer;
}

.webuploader-pick:hover {
  background: #AADFFD;
  border-color: #78C3F3;
  color: red;
  text-decoration: none;
}

:deep(.el-upload-list.el-upload-list--picture) {
  display: none !important;
}

.el-upload-list.el-upload-list--picture.show {
  display: block !important;
}
</style>